<template>
	<view class="content">
		<view class="" style="display: flex;">
			<u-button :plain="true" size="mini" :type="params.type===1?'success':''" :ripple="true" @click="clickbutton(1)">周末</u-button>
			<u-button :plain="true" size="mini" :type="params.type===4?'success':''" :ripple="true" @click="clickbutton(4)">明</u-button>
			<u-button :plain="true" size="mini" :type="params.type===3?'success':''" :ripple="true" @click="clickbutton(3)">今</u-button>
			<u-button :plain="true" size="mini" :type="params.type===2?'success':''" :ripple="true" @click="clickbutton(2)">昨</u-button>
			<u-button :plain="true" size="mini" :type="params.type===5?'success':''" :ripple="true" @click="clickbutton(5)">周</u-button>
			<u-button :plain="true" size="mini" :type="params.type===6?'success':''" :ripple="true" @click="clickbutton(6)">月</u-button>
			<!-- <u-calendar v-model="show" :mode="mode" @change="changedate" max-date="9999-12-31"></u-calendar> -->
			<rangeDatePick 
			    :show="show"
			    @showchange="showchange"
			    start="2015-01-01"
			    end="2200-12-01"
			    :value="[start,end]"
			    @change="changedate"
			    @cancel="show = false"
			    themeColor="#19be6b"
			    fields='day'
			></rangeDatePick>
			<u-button :type="params.type===0?'success':''" size="mini" :plain="true" @click="show = true">
				<u-icon name="calendar" size="28"></u-icon>
			</u-button>
		</view>
		<view class="" style="margin-top: 10px;">
			<view class="" style="margin-top: 20px;">
				<view class="" style="display: flex;justify-content: space-between;">
					<text style="font-weight: bold; ">部门筛选</text>
					<view class="">
						<u-select v-model="showDepartment" clearabled :list="departmentList" @confirm="confirmDepartment"></u-select>
						<u-input style="width: 320rpx;" v-model="departmentvalue" placeholder="部门筛选" type="select" border="border" @click="showDepartment = true" />
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;align-items: center;align-items: center;margin-top: 20px;">
					<text style="font-weight: bold;">项目数据</text>
					<view class="">
						<!-- <u-select v-model="shows" clearabled :list="projectselect" @confirm="confirm"></u-select> -->
						<u-input style="width: 220rpx;" v-model="projectvalue" placeholder="渠道选择" type="select" border="border" @click="shows = true" />
					</view>
					<view class="">
						<u-input style="width: 320rpx;" v-model="diseasesvalue" placeholder="病种筛选" type="select" border="border" clearable @click="visible = true" />
					</view>
					
				</view>
				<!-- 新增病种筛选 -->
				<view class="tree" catchtouchmove="true" v-if="visible">
				  <view class="tree-box">
				    <view class="tree-box-header">
				      <view class="tree-box-header-bar"></view>
				      <view class="tree-box-header-title">选择</view>
				      <view class="tree-box-header-bar" @click="handleClose">
				        <image src="../../static/img/delete.png" style="width: 28rpx; height: 88rpx" mode='aspectFit' ></image>
				      </view>
				    </view>
				
				    <view class="tree-box-header-placeholder"></view>
					
					<view class="tree-content">
						<hb-tree :itemList="itemList" @select="handleSelect"></hb-tree>
					</view>
				  </view>
				</view>
				<!-- 渠道 -->
				<view class="tree" catchtouchmove="true" v-if="shows">
				  <view class="tree-box">
				    <view class="tree-box-header">
				      <view class="tree-box-header-bar"></view>
				      <view class="tree-box-header-title">选择</view>
				      <view class="tree-box-header-bar" @click="handleCloseChannel">
				        <image src="../../static/img/delete.png" style="width: 28rpx; height: 88rpx" mode='aspectFit' ></image>
				      </view>
				    </view>
				
				    <view class="tree-box-header-placeholder"></view>
					
					<view class="tree-content">
						<hb-tree :itemList="projectselect" @select="handleSelectChannel"></hb-tree>
					</view>
				  </view>
				</view>
				<!--  -->
				<u-table border-color="null" style="margin-top: 10px;">
					<u-tr class="u-tr">
						<u-th class="u-th" v-for="item in projecttitle">{{item}}</u-th>
					</u-tr>
					<u-tr class="u-tr" v-for="item in projectlist">
						<u-td class="u-td">{{item.name}}</u-td>
						<u-td class="u-td">{{item.add_num}}</u-td>
						<u-td class="u-td">{{item.order_num}}</u-td>
						<u-td class="u-td">{{item.arrive_num}}</u-td>
					</u-tr>
				</u-table>
			</view>
			<view class="" style="margin-top: 20px;">
				<view class="" style="display: flex;justify-content: space-between;align-items: center;">
					<text style="font-weight: bold;">线索数据</text>
					<view class="">
						<u-select v-model="showclue" clearabled :list="clueselect" @confirm="confirmclue"></u-select>
						<u-input style="width: 320rpx;" v-model="cluevalue" placeholder="线索选择" type="select" border="border"  @click="showclue = true" />
					</view>
				</view>
				<u-table border-color="null" style="margin-top: 10px;">
					<u-tr class="u-tr">
						<u-th class="u-th" v-for="item in cluetitle">{{item}}</u-th>
					</u-tr>
					<u-tr class="u-tr" v-for="item in cluelist">
						<u-td class="u-td">{{item.name}}</u-td>
						<u-td class="u-td">{{item.new_num}}</u-td>
						<u-td class="u-td">{{item.untreated_num}}</u-td>
						<u-td class="u-td">{{item.customer_num}}</u-td>
					</u-tr>
				</u-table>
			</view>
			<view class="" style="margin-top: 20px;">
				<view class="" style="display: flex;justify-content: space-between;align-items: center;">
					<text style="font-weight: bold;">回访数据</text>
				</view>
				<u-table border-color="null" style="margin-top: 10px;">
					<u-tr class="u-tr">
						<u-th class="u-th" v-for="item in visittitle">{{item}}</u-th>
					</u-tr>
					<u-tr class="u-tr" style="height: 76rpx;" v-for="item in visitlist">
						<u-td class="u-td"><text @click="clickrow(item)" >{{item.name}}</text></u-td>
						<u-td class="u-td"><text @click="clickrow(item)" >{{item.uncallback_num}}</text></u-td>
						<u-td class="u-td"><text @click="clickrow(item)" >{{item.callback_num}}</text></u-td>
						<u-td class="u-td"><text @click="clickrow(item)" >{{item.callback_avg_num}}</text></u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
		<u-mask :show="loading" :mask-click-able="false">
			<view class="warp">
				<u-loading mode="circle" :show="loading" size="55" color="#19be6b"></u-loading>
			</view>
		</u-mask>
		<u-tabbar :list="vuex_tabbar"></u-tabbar>
	</view>
</template>
<script>
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	import HbTree from "../hb-tree/hb-tree.vue"
	export default {
		name: 'HbTreeSelect',
		components: {rangeDatePick,HbTree},
		data() {
			return {
				show: false,
				shows: false,
				showDepartment:false,
				loading: false,
				showclue: false,
				params: {channel_id: '',department_type:0, type: 3, start_time: '', end_time: '', clue_type: 0,patient_diseases_id:1},
				mode: 'range',
				buttonshow: 2,
				projecttitle:['项目','新增','预到','到诊'],
				projectlist: [],
				departmentList:[
                {
                    "id": 1,
                    "name": "咨询部"
                },
                {
                    "id": 2,
                    "name": "北大咨询部"
                }
            ],
				projectselect: [],
				projectvalue:'全部',
				departmentvalue:'全部',
				cluetitle: ['项目','新数据','未处理','转客户'],
				cluelist: [],
				clueselect: [{label: '全部', value: 0}, {label: '客服录入', value: 1}, {label: '留言', value: 2}, {label: '微信', value: 3}, {label: '来电', value: 4}],
				cluevalue:'全部',
				visittitle: ['项目','过期未访','回访人数','人均次数'],
				visitlist: [],
				maxDate: '',
				// 病种筛选
				visible: false,
				itemList: [],
				diseasesvalue:'白癜风',
				diseasesId:'',
			}
		},
		onLoad() {
			this.askData()
			this.ddlogin()
			// uni.setStorageSync('token', 'EFhiVBaqhtAcDuMxGe9g3kbDuVwqxvEE_1685683373')
		}, 
		computed: {
		  end() {
			var date = new Date();
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			var lastTime = new Date(nextMonthFirstDay - oneDay);
			var month = parseInt(lastTime.getMonth() + 1);
			var day = lastTime.getDate();
			if (month < 10) {
				month = '0' + month
			}
			if (day < 10) {
				day = '0' + day
			}
			return date.getFullYear() + '-' + month + '-' + day;
		  },
		  start() {
			var date = new Date();
			date.setDate(1);
			var month = parseInt(date.getMonth() + 1);
			var day = date.getDate();
			if (month < 10) {
				month = '0' + month
			}
			if (day < 10) {
				day = '0' + day
			}
			return date.getFullYear() + '-' + month + '-' + day;
		  }
		},
		created() {
			this.dd.ready(() => {
				this.dd.biz.navigation.setTitle({
				  title: "项目", 
				})
			 })
			
		},
		beforeDestroy() {},
		methods: {
			ddlogin(){
				if (this.dd.env.platform!=="notInDingTalk") {
					let that = this
					this.dd.runtime.permission.requestAuthCode({
					    corpId: that.CorpId,
					    onSuccess: function(result) {
							that.$u.api.dingtalk_login({code:result.code}).then(res=>{
								uni.setStorageSync('token', res.access_token)
								that.$u.vuex('info', res.info)
								that.askData()
							})
					    },
					    onFail : function(err) {}
					 
					})
				}
				
			},
			showchange(){ this.show=false },
			askData() {				
				this.loading = true
				this.$u.api.report_project_index(this.params).then(res=>{
					// alert(JSON.stringify(res))
					this.projectselect = []
					this.projectselect = res.condition.source_channel	
					this.projectselect.unshift({label: '全部', value: 0})
					this.departmentList=[]
					this.departmentList=res.condition.department_type
					this.departmentList.forEach(item=>{
						item.label=item.name
						item.value=item.id
					})
					this.departmentList.unshift({label: '全部', value: 0})
					this.itemList=res.condition.diseases
					this.projectlist = res.project
					this.cluelist = res.clue
					this.visitlist = res.callback
					this.loading = false
				})
			},
			clickbutton(type) {
				this.params.type = type
				this.askData()
			},
			changedate(e) {
				console.log(e)
				this.params.type = 0
				this.params.start_time = e[0]
				this.params.end_time = e[1]
				this.askData()
				this.show = false
			},
			confirm(e) {
				this.projectvalue = e[0].label
				this.params.channel_id = e[0].value
				console.log(this.params.channel_id)
				this.askData()
			},
			confirmDepartment(e){
				this.departmentvalue = e[0].label
				this.params.department_type = e[0].value
				this.askData()
			},
			confirmclue(e) {
				this.cluevalue = e[0].label
				this.params.clue_type = e[0].value
				this.askData()
			},
			clickrow(row){
				uni.navigateTo({
					url: `/pages/visitreport/visitreport?project_id=${row.id}&type=${this.params.type}&start_time=${this.params.start_time}&end_time=${this.params.end_time}`,
				})
				console.log(111, row)
			},
			// 病种筛选
			//----------------------------公共方法--------------------------------
			_show({itemList, params, success}) {
				this.visible = true
				this.itemList = itemList
					
				callback = success
			},
			
			//----------------------------事件回调--------------------------------
			handleClose() {
			  this.visible = false
			},
			handleCloseChannel(){
			 this.shows = false
			},		
			handleSelect(item) {
				// console.log(item,'item')
			  // callback(item)
			  this.diseasesvalue=item.title
			  this.params.patient_diseases_id=item.value
			  // console.log(this.params.patient_diseases_id,'this.params.patient_diseases_id')
			  this.visible = false
			  this.askData()
					
			},
			handleSelectChannel(item) {
			  this.projectvalue=item.title
			  this.params.channel_id=item.value
			  // console.log(this.params.patient_diseases_id,'this.params.patient_diseases_id')
			  this.shows = false
			  this.askData()
					
			} 
		}
	}
</script>
<style>
	.content{
		padding: 10rpx 20rpx;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.tree {
	  position: fixed;
	  top: 0;
	  left: 0;
	  /* width: 100vh; */
	  width: 100%;
	  height: 100%;
	  background-color: rgba(51,51, 51, 0.8);
	  z-index: 1000;
	}
	
	.tree-box {
	  position:absolute;
	  bottom: 0;
	    width: 100%;
	  /* width: 749rpx; */
	  height: 900rpx;
	  background: #FFFFFF;
	  border-radius: 24rpx 24rpx 0rpx 0rpx;
	}
	
	.tree-box-header {
	  width: 100%;
	  height: 88rpx;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  position: absolute;
	  top: 0;
	  z-index: 10;
	}
	
	.tree-box-header-placeholder {
	  width: 100%;
	  height: 88rpx;
	}
	
	.tree-box-header-title {
	  font-size: 32rpx;
	  font-family: PingFangSC-Semibold, PingFang SC;
	  font-weight: 600;
	  color: #333333;
	}
	
	.tree-box-header-bar {
	  width: 120rpx;
	  height: 88rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.tree-content {
		overflow: auto;
		height: 90%;
	}
</style>
